<template>
  <el-header class="navigation-header">
    <div class="nav-container">
      <!-- 主导航菜单 -->
      <nav class="main-nav">
        <el-menu
          :default-active="activeIndex"
          mode="horizontal"
          class="nav-menu"
          background-color="#ffd700"
          text-color="#000000"
          active-text-color="#e6a23c"
          @select="handleSelect"
          router
        >
          <el-menu-item index="auto">首页</el-menu-item>
          <el-menu-item index="wantbuy">我要买</el-menu-item>
          <el-menu-item index="3">我要卖</el-menu-item>
          <el-menu-item index="4">山猫服务</el-menu-item>
          <el-menu-item index="5">求职招聘</el-menu-item>
          <el-menu-item index="6">行业资讯</el-menu-item>
          <el-menu-item index="7">关于山猫</el-menu-item>
        </el-menu>
      </nav>

      <!-- 右侧功能区 -->
      <div class="nav-actions">
        <el-button type="text" class="action-btn" @click="handleLogin">
          <el-icon><User /></el-icon>
          登录/注册
        </el-button>
      </div>
    </div>
  </el-header>
  <el-main>
    <router-view />
  </el-main>
</template>

<script setup>
import { ref } from 'vue'
import { Star, Phone, User } from '@element-plus/icons-vue'
import { ElMessage, textProps } from 'element-plus'

const activeIndex = ref('auto')

const handleSelect = (index) => {
  activeIndex.value = index
  // 根据index执行不同的导航操作
  const menuMap = {
    '1': { name: '首页', path: '/' },
    '2': { name: '我要买', path: '/wantbuy' },
    '3': { name: '我要卖', path: '/sell' },
    '4': { name: '山猫服务', path: '/service' },
    '5': { name: '求职招聘', path: '/jobs' },
    '6': { name: '行业资讯', path: '/news' },
    '7': { name: '关于山猫', path: '/about' }
  }
  
  const menuItem = menuMap[index]
  console.log('Selected menu item:', menuItem)
  if (menuItem) {
    ElMessage.info(`跳转到${menuItem.name}`)
    // 实际项目中这里使用路由跳转
    // router.push(menuItem.path)
  }
}

const handleContact = () => {
  ElMessage.success('联系电话：0735-80725200')
}

const handleLogin = () => {
  ElMessage.info('打开登录对话框')
}
</script>

<style scoped>

/* 导航条置顶样式 */
.navigation-header {
  position: fixed; /* 固定定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 全宽 */
  height: 60px; /* 固定高度 */
  background: #ffd700; /* 金黄色背景 */
  z-index: 1000; /* 确保在最顶层 */
  border-bottom: 1px solid #e6a23c; /* 底部边框 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.nav-container {
  max-width: 1200px; /* 最大宽度 */
  margin: 0 auto; /* 水平居中 */
  height: 100%; /* 继承高度 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 两端对齐 */
  padding: 0 20px; /* 左右内边距 */
}

/* Logo样式 */
.logo {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: #000; /* 黑色文字 */
}

.logo-icon {
  margin-right: 8px;
  font-size: 24px;
}

/* 导航菜单 */
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
  font-size: 16px;
  width: 100%;
}

.nav-item {
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
  text-decoration: none;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

/* 选中状态（深色块） */
.nav-item.active {
  background: #333; /* 深灰色背景 */
  color: #fff; /* 白色文字 */
}

.nav-item:not(.active):hover {
  background: rgba(255, 255, 255, 0.3); /* 半透明白色 */
}

/* 右侧辅助元素 */
.nav-auxiliary {
  display: flex;
  align-items: center;
}

.divider {
  width: 1px;
  height: 30px;
  background: #e6a23c;
  margin: 0 15px;
}

.mini-logo {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}

/* 主内容区域（为固定导航留出空间） */
.main-content {
  margin-top: 60px; /* 与导航高度相同 */
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-item {
    padding: 0 12px;
    font-size: 12px;
  }
  
  .nav-container {
    padding: 0 10px;
  }
}
</style>
/* 右侧操作按钮